<template>
  <base-breadcrumb>
  <searchData :searchData="searchArr" @search="handleSearch"></searchData>
    <a-card>
      <a-button class="mb12" type="primary" v-btnPermission="'tm_042_add_01'" @click="handleManage(null,1)" v-if="hideBuquBtn()">新增</a-button>
      <a-table
        :pagination="pagination"
        :rowClassName="rowClassName"
        :loading="loading"
        :customRow="customRow"
        rowKey="id"
        :columns="columns"
        :data-source="list"
        :expandedRowKeys="expandedRowKeys"
        :expandIcon="expandIcon"
      >
        <div slot="status" slot-scope="text">
          {{ text ? '可用' : '不可用' }}
        </div>
        <template slot="operation" slot-scope="text, record" class="pub-table-list-action">

            <a v-btnPermission="'tm_047_loo_02'" @click="handleManage(record,2)">查看</a>
            <a-divider  type="vertical"  v-if="hideBuquBtn()"/>
            <!-- record.children 不存在就是子节点编辑，!record.parentId就是父节点并且为不可用 -->

            <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent v-if="hideBuquBtn()">
              更多<a-icon type="down" />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-if="!record.children" v-btnPermission="'tm_042_edi_05'">
                  <a  @click="handleManage(record,3)">编辑</a>
                </a-menu-item>
                <a-menu-item  v-if="!record.parentId && record.isModified*1 === 0" v-btnPermission="'tm_042_edi_02'">
                  <a @click="handleManage(record,3)">编辑</a>
                </a-menu-item>
                <a-menu-item  v-if="!record.parentId"  v-btnPermission="'tm_042_add_04'">
                  <a @click="handleManage(record,4)">添加节点</a>
                </a-menu-item>
                <a-menu-item  v-btnPermission="'tm_042_del_06'" v-if="!record.children">
                  <a @click="deleteDFn({ id: record.id })">删除</a>
                </a-menu-item>
                <a-menu-item  v-btnPermission="'tm_042_del_03'" v-if="!record.parentId && record.isModified*1 === 0">
                  <a @click="deleteDFn({ id: record.id })">删除</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
  
        </template>
      </a-table>
    </a-card>
    <div class="modal">
      <EditMonitoring class="vue" :visible.sync="visible" :formData="{}" @ok="getData()" :isAddNode="isAddNode"></EditMonitoring>
    </div>
  </base-breadcrumb>
</template>

<script>
import { reviewContentPage } from '@/api/technical/reviewContent'
import { list, del,delTypesLabel} from '@/api/technical/config'
import { getPageTechnicalMonitoringContentList, deleteMonitoring,getPageTechnicalMonitoringContentFyList} from '@/api/technical/monitoringContent'
import EditMonitoring from './editMonitoring'
import { DownOutlined } from '@ant-design/icons-vue';

export default {
  name: 'a' + Date.now(),
  components: {
    EditMonitoring,
    DownOutlined
  },
  data() {
    return {
      //页码数据
      pagination: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pagination.defaultCurrent = 1
          this.pagination.defaultPageSize = pageSize
          this.handleSearch()
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.pagination.defaultCurrent = current
          this.pagination.defaultPageSize = size
          this.handleSearch()
        }
      },
      // 子组件模态框是否展开
      childrenVisible: false,
      visible:false,
      //模态框表单数据
      form: {},
      //表格数据
      list: [],
      //组件类型
      type: '',
      loading: false,
      isAddNode:0,
      searchArr: [{name: '监测内容',type: 'input',value: 'monitoringContentName'},],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          isHidden: true,
          width: 140,
          customRender() {
            return Number(arguments[2]) + 1
          }
        },
        { title: '监测内容', dataIndex: 'monitoringContentName' },
        { title: '状态', dataIndex: 'statusName' },
        {title: '操作', dataIndex: 'operation', width: '200px', scopedSlots: { customRender: 'operation' } }
      ],
      selectRow: {
        id: null
      },
      rowClassName: (r) => {
        return r.id === this.selectRow.id ? 'select' : ''
      },
      expandedRowKeys: [],
      customRow: (record) => {
        return {
          on: {
            // 事件
            click: (event) => {
              if(event.srcElement.tagName=='DIV'){
                this.onExpand(record)
              }
            }
          }
        }
      },
      params: {},

    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleSearch(val) {
      if (val) {
        this.params = val
      }
      this.getData()
    },
    /**
     * @description:              打开模态框
     * @param {value, record}     参数
     * @return {Promise}          接口Promise
     */
    openModal(value, record, ident) {
      this.type = value
      this.form = {}
      console.log('recordrecord',record)
      this.form = record || {};
      this.form.status = this.form.status ? 1 : 0
      this.childrenVisible = true
    },
    /**
     * @description:         请求列表接口
     * @param {props} props  参数
     * @return {Promise}     接口Promise
     */
    async getData() {
      this.loading = true;
      let pageQuery = { pageNum: this.pagination.defaultCurrent, pageSize: this.pagination.defaultPageSize}
      pageQuery.param = { ...this.params }
      let res = await getPageTechnicalMonitoringContentFyList(pageQuery)
      this.loading = false
      if (res.code == '0') {
        this.list = res?.data.list || []
        console.log(res.data.total,233344)
        this.pagination.total = res.data.total;
      }
    },
    /**
     * @description:         是否展开
     * @param {props} props  参数
     * @return {Promise}     接口Promise
     */
    expandIcon(props) {
      if (props.record.children && props.record.children.length) {
        if (props.expanded) {
          //有数据-展开时候图标
          return <div role="button" tabIndex="0" aria-label="关闭行" class="ant-table-row-expand-icon ant-table-row-expanded"></div>
        } else {
          //有数据-未展开时候图标
          return <div role="button" tabIndex="0" aria-label="展开行" class="ant-table-row-expand-icon ant-table-row-collapsed"></div>
        }
      } else {
        //无数据-图标
        return <span class="ant-table-row-expand-icon ant-table-row-spaced"></span>
      }
    },
    /**
     * @description:              关闭模态框
     * @param {assemblyVisible}   参数
     * @return {Promise}          接口Promise
     */
    closeModal() {
      this.childrenVisible = false
      this.getData()
    },
    onExpand(record) {
      if (!this.editing) {
        if (this.selectRow.id === record.id) {
          this.selectRow = { id: null }
        } else {
          this.selectRow = record
        }
        this.toggle(record.id)
        // console.log('选中', record)
      }
    },
    toggle(id) {
      let res = this.expandedRowKeys.findIndex((v) => v === id)
      if (res === -1) {
        this.expandedRowKeys.push(id)
      } else {
        this.expandedRowKeys.splice(res, 1)
      }
    },
    //删除
    deleteDFn(params){
      let that = this;
      this.$confirm({
            title: '温馨提示',
            content: '请确定是否要删除该条数据？',
            onOk: () => {
                this.loading = true
                deleteMonitoring((params)).then((res)=>{
                this.loading = false;
                 if(res.code == '0'){
                   this.$message.success('删除成功');
                   this.getData()
                 }
               })
            },
          })
    },
    handleManage(record,flag) {
      if (record) {
          if(flag*1 === 4){
          this.form = {}
          this.form.parentName = record.monitoringContentName;
          this.form.parentId = record.id;
          }
          else{
            this.form = {...record}
          }
      } else {
        this.form = {}
        this.form.parentId = 0;
      }
      this.visible = true
      this.isAddNode = flag
    }
  }
}
</script>
<style lang="less">
.select {
  background: rgb(230, 247, 255);

  &:hover {
    background: rgb(230, 247, 255);
  }
}
</style>
